// 都是获取dom上面元素的方式

// HTMLCollection具有实时性
// NodeList是静态属性

const ul = document.createElement("ul");
ul.innerHTML = `
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
`;
document.body.appendChild(ul);

const lis = document.getElementsByTagName("li");
const nodeLis = document.querySelectorAll("li");

console.log("nodeLis", nodeLis); // NodeList(3) [li, li, li]
console.log("lis", lis); // log HTMLCollection(3) [li, li, li]

const ul = document.getElementsByTagName("ul")[0];
ul.removeChild(lis[0]);

console.log("---------------");

console.log("nodeLis", nodeLis); // NodeList(3) [li, li, li]
console.log("lis", lis); // log HTMLCollection(2) [li, li]

// 所以最好还是用 NodeList 去获取页面元素
